@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

$snack-ui-table-row-background: var(--snack-ui-table-row-background);

@function color-with-opacity-local($color, $opacity) {
  @return color-on-background-with-opacity($color, $snack-ui-table-row-background, $opacity);
}

.tableRow {
  --snack-ui-table-row-background: #{$sys-neutral-background1-level};

  @include composite-var($table-line-container);

  position: relative;

  display: flex;

  box-sizing: border-box;

  background-color: $snack-ui-table-row-background;
  border-color: transparent;
  border-style: solid none;
}

.rowPinnedCells {
  position: sticky;
  z-index: 1;

  display: flex;

  box-sizing: border-box;

  background-color: $snack-ui-table-row-background;
  border-color: $sys-neutral-decor-default;

  &::after {
    pointer-events: none;
    content: '';

    position: absolute;
    top: calc(0px - $border-width-table);
    bottom: calc(0px - $border-width-table);

    box-sizing: border-box;
    width: $border-width-table;
  }

  &[data-position='left'] {
    left: 0;

    &::after {
      right: 0;

      /* stylelint-disable */
      border-right: $border-width-table solid;
      border-color: inherit;
      /* stylelint-enable */
    }
  }

  &[data-position='right'] {
    right: 0;
    margin-left: auto;

    &::after {
      left: 0;

      /* stylelint-disable */
      border-left: $border-width-table solid;
      border-color: inherit;
      /* stylelint-enable */
    }
  }
}

.bodyRow {
  &[data-disabled] {
    cursor: not-allowed;
    background-color: $sys-neutral-background;

    .rowPinnedCells {
      background-color: $sys-neutral-background;
    }
  }

  &[data-selected] {
    background-color: color-with-opacity-local($sys-primary-accent-default, $opacity-a008);

    .rowPinnedCells {
      background-color: color-with-opacity-local($sys-primary-accent-default, $opacity-a008);
      border-color: $sys-primary-decor-activated;
    }

    &:hover, &[data-actions-opened] {
      background-color: color-with-opacity-local($sys-primary-accent-default, $opacity-a016);
      border-color: $sys-primary-decor-hovered;

      .rowPinnedCells {
        background-color: color-with-opacity-local($sys-primary-accent-default, $opacity-a016);
        border-color: $sys-primary-decor-activated;
      }
    }
  }

  &[data-clickable] {
    cursor: pointer;
  }

  &:not([data-disabled]):not([data-selected]) {
    &:hover, &[data-actions-opened] {
      background-color: color-with-opacity-local($sys-neutral-accent-default, $opacity-a008);
      border-color: $sys-neutral-decor-hovered;

      .rowPinnedCells {
        background-color: color-with-opacity-local($sys-neutral-accent-default, $opacity-a008);        
        border-color: inherit;
      }
    }
  }
}

.tableHeader {
  position: sticky;
  z-index: 3;
  top: 0;
  border: none;
}
